<!-- 随堂测试已经开始的页面 -->
<template>
	<view class="page">
			<Header title="测试结果" :isShowRight="false" @back='back' arrowColor='#000' textColor='#000'></Header>
		<view class="contents">
			<view class="centerBox">
				<!-- top -->
				<view class="top_box">
					<view class="system_text">
						<view>{{current+1}}/{{info.totalSubject}}</view>
						<text v-if="isSelect.subjectType == 0">判断题（{{isSelect.score}}分）</text>
						<text v-if="isSelect.subjectType == 1">单选题（{{isSelect.score}}分）</text>
						<text v-if="isSelect.subjectType == 2">多选题（{{isSelect.score}}分）</text>
					</view>
					<view>
						测试耗时：{{handlerTime(info.timeConsuming)}}
					</view>
				</view>
				<!-- 题型 0：判断题，1：单选题，2：多选题 -->
				<view class="subject_list">
					<!-- 判断 -->
					<view class="subject_item" v-for="item,index in info.subjects" :key="index">
						<block v-if="item.checked">
							<view class="title">{{item.title}}</view>
							<!-- 选项 -->
							<view class="optioins_box">
								<view
									:class="['cell',cell.selectedFlag ? (cell.selectedFlag && cell.selectedFlag == cell.rightKeyFlag) ? 'act_right':'act_erro':'']"
									v-for="cell,idx in item.options" :key="idx">
									<view class="opt_ico" v-show="item.subjectType == 2">
										<image v-if="cell.selectedFlag == 0" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/common/check.png"
											mode=""></image>
										<image v-else src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/common/checked1.png" mode=""></image>
									</view>
									<view class="inner">
										<text
											v-if="item.subjectType != 0">{{`${cell.subjectCode}. ${cell.subjectContent}`}}</text>
										<text v-else>{{cell.subjectCode == 'A' ? '正确':'错误'}}</text>
									</view>
									<view class="tight_worng" v-if="cell.selectedFlag">
										<image v-if="cell.selectedFlag == cell.rightKeyFlag" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/course/correct.png"
											mode=""></image>
										<image v-else src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/course/error.png" mode=""></image>
									</view>
								</view>
							</view>
							<view class="answers">
								<view :class="['flag',item.answerFlag == 0?'not_flag':'']">
									回答{{item.answerFlag == 0?'错误':'正确'}}
								</view>
								<view v-if="item.subjectType == 0" class="sure">
									正确答案：<text class="txt">{{item.rightKey == 'A' ? '正确':'错误'}}</text>
								</view>
								<view v-else class="sure">
									正确答案：<text class="txt">{{item.rightKey}}</text>
								</view>
							</view>
						</block>
					</view>
				</view>
				<!-- 下一题 -->
				<view class="flex align-center position_bottom">
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/navgation.png" class="navgation" @click="sheetShow = true">
					</image>
					<view class="submit" v-if="current == info.totalSubject - 1" @click="goToScore">返回</view>
					<view class="nexts" v-else @click="gotoTest">下一题</view>
				</view>
			</view>
		</view>

		<!-- 答题卡弹窗 -->
		<u-popup :show="sheetShow" :round="30">
			<view class="popupBox">
				<view class="title">
					<view>答题卡</view>
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/close.png" @click="sheetShow = false"></image>
				</view>
				<view class="item_number allCenter">
					<view class="">{{info.testTotalSubject}}/{{info.totalSubject}}</view>
					<view class="flex">
						<view class="flex align-center">
							<view class="bg1"></view>
							<view class="finish">正确</view>
						</view>
						<view class="flex align-center">
							<view class="bg2"></view>
							<view class="unFinish">错误</view>
						</view>
					</view>
				</view>
				<!-- 循环得到答题数目 -->
				<view class="alltext">
					<view v-for='(item,index) in info.subjects' :key='index' class="item_select"
						@click="handlerNum(index)">
						<view :class="[item.answerFlag==1 ?'correct':'erro']">{{index+1}}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		testResult
	} from '@/apis/apis.js'
	import Header from '@/components/c_header.vue'
	export default {
		components: {
			Header
		},
		data() {
			return {
				id: "",
				info: {}, // 测试信息 info.subjects// 题库
				current: 0, // 正在答题下标
				isSelect: {}, // 正在答题
				btnshow: true, //判断提交答案还是下一题
				sheetShow: false, //控制答题卡弹窗
			}
		},
		onLoad(options) {
			this.id = options.id
			
		},
		onShow() {
			this.init()
		},
		watch: {
			info: {
				handler(newVal, oldVal) {
					// 完成题数
					const val = newVal.subjects.filter(el => el.memberRightKey)
					this.info.testTotalSubject = val.length // 已完成题目数量
				},
				deep: true
			}
		},
		methods: {
			async init() {
				const res = await testResult({
					testMemberId: this.id
				})
				// console.log('初始信息',res)
				res.data.subjects.forEach(el => {
					el.checked = false
				})
				this.info = res.data
				this.checkedSub()
			},
			// 当前题目
			checkedSub() {
				this.info.subjects.forEach(el => el.checked = false)
				this.info.subjects[this.current].checked = true
				this.isSelect = this.info.subjects[this.current]
			},
			//点击下一题
			gotoTest() {
				if (this.current == this.info.totalSubject - 1) return
				this.current++
				this.checkedSub()
			},
			// 点击答题卡中选项
			handlerNum(i) {
				this.current = i
				this.checkedSub()
				this.sheetShow = false
			},
			back() {
				uni.navigateBack()
			},
			goToScore() {
				this.back()
			},
			// 时长
			handlerTime(value) {
				let sencond = parseInt(value) // 3600秒等于60分钟等于1小时
				let h = parseInt(sencond / 3600) // 小时数
				let m = parseInt(sencond % 3600 / 60) // 小时剩余的秒数÷60 得到几分钟
				let s = parseInt(sencond % 3600 % 60) // 剩余秒数
				let result = `${h<10?'0'+h:h}:${m<10?'0'+m:m}:${s<10?'0'+s:s}`
				return result
			},
		},
	}
</script>

<style scoped lang="scss">
	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.allCenter {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.page {

		.bg {
			background: #fff;
			height: 140rpx;
			background-color: pink;
		}

		.contents {
			position: absolute;
			top: 160rpx;
			left: 0;
			right: 0;
			bottom: 0;
			background: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/testbg.png') no-repeat;
			background-size: cover;
		}

		.centerBox {
			position: absolute;
			top: 53rpx;
			left: 4%;
			right: 4%;
			bottom: 35rpx;
			box-shadow: 0 0 30rpx 0 rgba(60, 181, 254, 0.3) inset;
			border-radius: 20rpx;
			background-color: #fff;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			// 题目时间
			.top_box {
				font-size: 30rpx;
				font-weight: 500;
				color: #818181;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 62rpx 34rpx 66rpx 30rpx;

				.system_text {
					display: flex;
					align-items: center;
				}

			}

			.subject_list {
				width: 100%;
				flex: 1;
				padding-bottom: 100rpx;
				overflow: hidden;
				overflow-y: visible;

				// 题内容
				.subject_item {
					width: 90%;
					margin: 0 auto;

					.title {
						font-size: 30rpx;
						font-weight: 500;
						color: #202020;
						line-height: 40rpx;
						padding: 20rpx;
					}

					// 选项样式
					.optioins_box {
						font-size: 28rpx;
						color: #3A3E43;

						.cell {
							position: relative;
							display: flex;
							align-items: center;
							height: 104rpx;
							margin-bottom: 20rpx;
							padding: 0 32rpx;
							border-radius: 10rpx;
							background: #F9F9F9;

							.opt_ico {
								width: 30rpx;
								height: 30rpx;
								margin-right: 24rpx;

								&>image {
									width: 100%;
									height: 100%;
								}
							}

							// √ × 图标
							.tight_worng {
								position: absolute;
								right: 30rpx;
								top: 50%;
								transform: translateY(-50%);
								width: 38rpx;
								height: 38rpx;
								overflow: hidden;

								&>image {
									width: 100%;
									height: 100%;
								}
							}
						}

						.act_right {
							background: #E5F7FF;

						}

						.act_erro {
							background: #FFF2F0;
						}
					}

					// 答案
					.answers {
						margin-top: 40rpx;

						.flag {
							font-size: 32rpx;
							font-weight: bold;
							color: #3BB66C;
						}

						.not_flag {
							color: #FC4C34;
						}

						.sure {
							margin-top: 34rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #2D2E2F;

							.txt {
								color: #ABABAB;
							}
						}
					}

				}
			}

			.position_bottom {
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				padding-bottom: 30rpx;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;

				.navgation {
					width: 36rpx;
					height: 35rpx;
					margin-right: 42rpx;
				}

				.nexts,
				.submit {
					width: 467rpx;
					height: 78rpx;
					background-color: #194FC9;
					border-radius: 10rpx;
					line-height: 78rpx;
					text-align: center;
					color: #fff;
					font-weight: 700;
				}
			}
		}
	}


	.popupBox {
		width: 100%;
		height: 770rpx;

		.title {
			width: 100%;
			height: 110rpx;
			border: 1px solid rgba(0, 0, 0, 0.2);
			color: #111111;
			font-size: 38rpx;
			font-weight: bold;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-right: 40rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 250rpx;
			}
		}

		.item_number {
			width: 100%;
			padding: 38rpx 30rpx 52rpx 30rpx;
			color: #666666;
			font-size: 30rpx;

			.bg1 {
				width: 26rpx;
				height: 26rpx;
				border-radius: 50%;
				background: #E1FCEC;
			}

			.bg2 {
				width: 26rpx;
				height: 26rpx;
				border-radius: 50%;

				background: #FFE5E2;
			}

			.finish {
				font-size: 28rpx;
				padding-left: 12rpx;
				margin-right: 34rpx;
				color: #33AA63;
			}

			.unFinish {
				font-size: 28rpx;
				padding-left: 12rpx;
				color: #FC4C34;
			}
		}

		.alltext {
			width: 100%;
			height: 505rpx;
			overflow: hidden;
			overflow-y: visible;
			padding: 0 40rpx;
			font-size: 34rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;

			.item_select {
				width: 14.28%;
				height: 70rpx;
				margin-bottom: 32rpx;
				display: flex;
				justify-content: center;

				.correct {
					width: 70rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					border-radius: 50%;
					background: #E1FCEC;
					color: #33AA63;

				}

				.erro {
					width: 70rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					border-radius: 50%;
					color: #FC4C34;
					background: #FFE5E2;
				}
			}




		}
	}
</style>
